<template>
	<view class="main">
		<!-- #ifndef H5 -->
		<Nav></Nav>
		<!-- #endif -->
		<view class="header">
			<view class="header_pic">
				<view class="">
					<image class="header_img" :src="headerSrc" mode=""></image>
				</view>
				<view class="username">{{ nickname }}</view>
			</view>
		</view>
		<!-- vip  logo -->
		<view class="vip_main">
			<view class="vip_suffer">当前经验值</view>
			<view class="vip_integral">{{ experience }}</view>
			<hr />
			<view class="vipList acea-row">
				<view class="item">
					<view class="pictrue">
						<image src="./static/vip01.png"></image>
					</view>
					<view class="name">会员折扣</view>
				</view>
				<view class="item">
					<view class="pictrue">
						<image src="./static/vip02.png"></image>
					</view>
					<view class="name">专属徽章</view>
				</view>
				<view class="item">
					<view class="pictrue">
						<image src="./static/vip03.png"></image>
					</view>
					<view class="name">会员升级</view>
				</view>
				<view class="item">
					<view class="pictrue">
						<image src="./static/vip04.png"></image>
					</view>
					<view class="name">经验积累</view>
				</view>
				<view class="item">
					<view class="pictrue">
						<image src="./static/vip05.png"></image>
					</view>
					<view class="name">更多特权</view>
				</view>
			</view>
		</view>
		<!-- 经验获取 -->
		<view class="module">
			<view class="public_title  row-middle">
				<view class="icons"></view>
				获取经验
			</view>
			<view class="gainList">
				<view class="item  row-between-wrapper">
					<view class="picTxt  row-middle">
						<view class="pictrue">
							<text class="iconfont icon-qiandao2">
								<image
									src="static/sigin.png"
									class="singin"
									mode=""
								></image>
							</text>
						</view>
						<view class="text">
							<view class="name line1">签到</view>
							<view class="info line1">每日签到可获得经验值</view>
						</view>
					</view>
					<navigator url="signIn" class="button">
						<view class="">去获取</view>
					</navigator>
				</view>
				<view class="item  row-between-wrapper">
					<view class="picTxt  row-middle">
						<view class="pictrue on">
							<text class="iconfont icon-shangpin">
								<image
									src="static/shopping_o.png"
									class="singin"
									mode=""
								></image>
							</text>
						</view>
						<view class="text">
							<view class="name line1">购买商品</view>
							<view class="info line1">
								购买商品可获得对应是经验值
							</view>
						</view>
					</view>
					<navigator url="*" class="button">
						<text @click="skip">去获取</text>
					</navigator>
				</view>
			</view>
		</view>
		<view class="">
			<view class="text_bt">经验值明细</view>
			<view class="text_bt">签到经验奖励</view>
		</view>
	</view>
</template>

<script>
import Nav from "@/components/top_nav.vue";
import {getuserInfo} from "./../../../network/vip.js";
export default {
	data() {
		return {
			nickname: "",
			experience: "",
			headerSrc: ""
		};
	},
	components: {
		Nav
	},
	created() {
		this.getinfo();
	},
	methods: {
		async getinfo() {
			let {data} = await getuserInfo();
			console.log(data);
			this.nickname = data.nickname;
			this.experience = data.experience;
			this.headerSrc = data.avatar;
		},
		skip() {
			uni.switchTab({
				url: "/pages/classify/classify"
			});
		}
	}
};
</script>
<style lang="scss">
.singin {
	width: 50rpx;
	height: 50rpx;
	margin-left: 10rpx;
	margin-top: 10rpx;
}

.header {
	background-image: url("");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 100%;
	height: 380rpx;
	background-color: #fff;
	.header_pic {
		.header_img {
			height: 80rpx;
			width: 80rpx;
			border-radius: 50%;
			// display: flex;
			// flex-direction: column;
			// username
			margin-top: 20rpx;
			margin-left: 30rpx;
		}
		.username {
			display: inline-block;
			position: relative;
			top: -70rpx;
			left: 150rpx;
			color: #fae2c1;
		}
	}
}
.vip_main {
	background-image: url("");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 690rpx;
	height: 360rpx;
	margin: -250rpx auto 0 auto;
	border-radius: 23rpx;
	padding: 22rpx 27rpx;
	.vip_suffer {
		color: #ae8b4a;
		font-size: 24rpx;
	}
	.vip_integral {
		font-size: 60rpx;
		color: #775c29;
		margin-top: 6rpx;
	}
	hr {
		margin-top: 20rpx;
		margin-bottom: 50rpx;
	}
}
.vipList {
	display: flex;
	.item {
		width: 20%;
		text-align: center;
		.pictrue {
			width: 70rpx;
			height: 70rpx;
			margin: 0 auto;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.name {
			font-size: 24rpx;
			color: #403d4e;
			margin-top: 18rpx;
		}
	}
}
.module {
	padding: 40rpx 30rpx 0 30rpx;

	.gainList {
		margin-top: 10rpx;

		.item {
			height: 130rpx;
			position: relative;

			.picTxt {
				display: flex;
				.pictrue {
					display: flex;
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					background: linear-gradient(
						-45deg,
						rgba(249, 119, 107, 1) 0%,
						rgba(255, 147, 137, 1) 100%
					);
					text-align: center;
					line-height: 70rpx;
					color: #fff;

					&.on {
						background: linear-gradient(
							-45deg,
							rgba(254, 160, 96, 1) 0%,
							rgba(255, 204, 170, 1) 100%
						);
					}

					&.on2 {
						background: linear-gradient(
							-45deg,
							rgba(157, 208, 116, 1) 0%,
							rgba(161, 214, 124, 1) 100%
						);
					}
				}

				.text {
					margin-left: 30rpx;
					width: 400rpx;

					.name {
						font-size: 30rpx;
						color: #282828;
					}

					.info {
						font-size: 24rpx;
						color: #999999;
						margin-top: 6rpx;
					}
				}
			}

			.button {
				position: relative;
				top: -70rpx;
				left: 550rpx;
				width: 140rpx;
				height: 50rpx;
				background: linear-gradient(
					-90deg,
					rgba(231, 182, 103, 1) 0%,
					rgba(255, 234, 181, 1) 100%
				);
				border-radius: 25rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 26rpx;
				color: #8d5306;
			}
		}
	}
}

.text_bt {
	margin-top: 50rpx;
	margin-bottom: 40rpx;
	margin-left: 50rpx;
}
// .pictrue{
// 	background-image: url('./static/sigin.png');
// }
</style>
